import React from 'react';
import {View, Text, Image, StyleSheet, Dimensions} from 'react-native';

import Api from '../../apis/Api.ts';

const width = Dimensions.get('window').width;

export default function StoryItem({item, index,}: any) {
  console.log(item.id)
  return (
    <View
      key={index}
      style={[
        styles.item,
        index % 2 === 0 ? styles.itemMarginRight : styles.itemMarginLeft,
      ]}>
      {
        item.cover ?  <Image
        style={styles.image}
        source={{uri: Api.file.show(item.cover)}}></Image> :
        <Image
        style={styles.image}
        source={require('../../assets/image/cd-head.png')}></Image>
      }
      <View style={styles.description}>
        <Text style={styles.title}>{item.name}</Text>
        <View style={styles.tags}>
          {item.typeNames.map((subItem: string) => (
            <Text style={styles.tap}>#{subItem} + {item.id}</Text>
          ))}
        </View>

        <View style={styles.author}>
          <View style={styles.left}>
            <View style={styles.user}>
              {item.createAvatar ? (
                <Image
                  source={{uri: Api.file.show(item.createAvatar)}}
                  style={styles.userImage}></Image>
              ) : (
                <Image
                  source={require('../../assets/image/logo.png')}
                  style={styles.userImage}></Image>
              )}
              <Text style={styles.name}>{item.createName || '儿时故事'}</Text>
            </View>
            <Text style={styles.time}>{item.createTime}</Text>
          </View>
          <View style={styles.right}>
            <Image
              style={styles.like}
              source={require('../../assets/image/like-active.png')}
            />
            <Text style={styles.likeCount}>{item.praiseNum}</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    flex: 1,
    // TODO 宽度不知怎么计算
    minWidth: width/2 - 20,
    height: 'auto',
    backgroundColor: '#fff',
    borderRadius: 20,
    marginBottom: 12,
    overflow: 'hidden',
    // 安卓阴影
    elevation:6,
    // IOS阴影
    shadowColor: 'red',
    shadowOffset:{width:0,height:0},
    shadowOpacity: 1,
    shadowRadius: 1.5,
  },
  itemMarginRight: {
    marginLeft: 6,
  },
  itemMarginLeft: {
    marginRight: 6,
  },
  image: {
    width: '100%',
    height: 160,
  },
  description: {
    flex: 1,
    padding: 10,
  },
  title: {
    fontSize: 18,
  },
  tags: {},
  tap: {
    fontSize: 12,
    color: '#b1d428',
  },
  author: {
    flexDirection: 'row',
    marginTop: 10,
    justifyContent: 'space-between',
    marginBottom: 5,
  },
  left: {},
  user: {
    flexDirection: 'row',
  },
  userImage: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
  },
  name: {
    fontSize: 12,
    marginLeft: 5
  },
  time: {
    fontSize: 12,
    color: '#999',
  },
  right: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  like: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
  },
  likeCount: {
    color: '#bf9886',
    fontSize: 12,
  },
});
